<template>
  <div id="login">
  
    <img id="loginLogo" src="">
    <form method="" v-on:submit="findUser">
      <div>
        <!--登录页面表单-->
        <input type="text" placeholder="请输入用户名" v-model="loginForm.username">
        <br>
  
        <input type="password" placeholder="请输入密码" v-model="loginForm.password">
        </br>
        <input type="submit" value="登录" class="button" @click="findUser" id="loginbt">
        <input type="button" id="backToMine" value="点击此处返回" @click="back" />
        <div class="find-change-geshi" style="width: 100%;height: 50px;"></div>
  
      </div>
    </form>
    <!--提示信息-->
    <mt-popup v-model="popupVisible_1" position="top">
      <span class="popupV">输入正确用户名及密码</Span>
    </mt-popup>
  </div>
</template>

<script>
import Axios from 'axios'

export default {
  name: 'login',
  data() {
    return {
      loginForm: {
        username: '',
        password: '',

      },
      popupVisible_1: false
    }
  },
  methods: {

    back() {

      this.$router.push({ path: '/' })
    },
    // 登录查找用户
    findUser() {
      var router = this.$router
      var change = this.popupVisible_1
      var newUser = {
        username: this.loginForm.username,
        password: this.loginForm.password
      }


      // 发送数据进行登录
      Axios.post('/api/signIn', newUser)
        .then(function (res, req) {
          if (res.data.code === 0) {
            if (res.data.data.username == "admin") {
              router.push({ path: '/Boss' })
              sessionStorage.setItem('username', res.data.data.username);
            } else {
              change = true
              console.log(res.data.data.username + '登录')
              sessionStorage.setItem('username', res.data.data.username);
              var name = sessionStorage.getItem('username');
              router.push({ path: '/', query: { user: res.data.data.username } })
            }
          }
          else if (res.data.code === 99) {

            change = true;
          }

        })
        .catch(err => {
          console.log(err)
        })
    }


  }
}
</script>

<style >
#login {
  width: 100%;
  height: 700px;
  background-image: url("../assets/loginbg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
}

#login input {
  width: 200px;
  height: 30px;
  padding: 3px 3px 3px;
  margin: 0 0 5px 0;
  border: 1px solid #ccc;
  -moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
  -webkit-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
  box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
  background-color: none;
}

#login input[type="password"] {
  background: url(../assets/loginIcon1.png) no-repeat 3px -63px #ffffff;
  padding: 0.3em 0.3em 0.3em 2.5em;
}

#login input[type="text"] {
  background: url(../assets/loginIcon2.png) no-repeat 3px -63px #ffffff;
  padding: 0.3em 0.3em 0.3em 2.5em;
}

#loginLogo {
  width: 300px;
}




/*loginbutton*/

.button {
  background-color: rgb(254,0,0);
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  border-width: 1px;
  border-style: solid;
  height: 50px;
  padding: 0;
  width: 200px;
  cursor: pointer;
  font: 17px Helvetica;
  color: #FFF;
  margin-top: 50px;
}

.popupV {
  background-color: transparent;
  color: rgba(255, 255, 255, 1);
}
</style>
